<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>仓储物流</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .van-field__body textarea {
            width: 3.51rem;
            height: 1.36rem !important;
            /* border: .01rem solid #EBEBEB; */
            border-radius: .05rem;
            padding: 0 .08rem;
        }

        html,
        body {
            background-color: #fff;
        }

        .app {
            background-color: #f7f7f7;
        }

        .flex-x-sb {
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <header>
            <!-- <div class="header fixed-top">
            <div class="previous" @click="backPage">
                <img src="../image/mine/previous.png" alt="">
            </div>
            <div class="right">
                <div class="report header-icon" @click="ShowReportDialog">
                    <img src="../image/mine/report.png" alt="">
                </div>
                <div class="share header-icon" @click="ShowShareDialog">
                    <img src="../image/mine/share.png" alt="">
                </div>
            </div>
        </div> -->


            <div class="flex-x-s f7-header">
                <div class="title">
                    维修详情
                </div>

            </div>

        </header>

        <div class="pt">
            <div class="openapp-link">
                <img src="../image/share/openapp.png" alt="">
            </div>
            <div class="bgf iphonex-padding-bottom">
                <table></table>
                <van-swipe class="my-swipe ccwl-detail-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in objDetail.banners" :key="index" class="flex-x-c">
                        <img src="../image/default/item_img.png" alt="">
                    </van-swipe-item>
                </van-swipe>
                <div class="ccwl-detail">
                    <div class="title">{{objDetail.title}}</div>
                    <div class="money"><span>¥</span>{{objDetail.freight || objDetail.price}}{{objDetail.unitName}}</div>
                    <div class="label flex-x-s flex-wrap">
                        <div v-for="(item,index) in objDetail.tags" :key="index">{{item.name}}</div>
                    </div>
                    <div class="line"></div>
                    <div class="ccwl-cc-detail">
                        <!-- 仓储 -->
                        <div v-if="type == 1">
                            <div class="f1 flex-x-s">
                                <div>
                                    <span>仓库类型</span>
                                    <span>{{objDetail.goodsTypeName}}</span>
                                </div>
                                <div>
                                    <span>面积</span>
                                    <span>{{objDetail.area}}m²</span>
                                </div>
                            </div>
                            <div class="f2">
                                <span>所在地</span>
                                <span>{{objDetail.addressName}}</span>
                            </div>
                        </div>
                        <!-- 车找货 -->
                        <div v-if="type == 0 && status == 1">
                            <div class="f1 flex-x-s">
                                <div>
                                    <span>最大载重</span>
                                    <span>{{objDetail.weight}}吨</span>
                                </div>
                                <div>
                                    <span>发布时间</span>
                                    <span>{{objDetail.updateTime | handleTime}}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 货找车 -->
                        <div v-if="type == 0 && status == 0">
                            <div class="f1 flex-x-s">
                                <div>
                                    <span>货物类型</span>
                                    <span>{{objDetail.goodsTypeName}}</span>
                                </div>
                                <div>
                                    <span>货物重量</span>
                                    <span>{{objDetail.weight}}{{objDetail.weightUnit}}</span>
                                </div>
                            </div>
                            <div class="f2 f1">
                                <span>发布时间</span>
                                <span>{{objDetail.updateTime | handleTime}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="line" v-if="type == 0"></div>
                    <div v-if="type ==0">
                        <div class="ccwl-ys-detail iphonex-padding-bottom">
                            <div class="title">运输详情</div>
                            <div class="content">
                                <span>出发地</span>
                                <span>{{objDetail.departureAddressName}}</span>
                            </div>
                            <div class="content">
                                <span>目的地</span>
                                <span>{{objDetail.destinationAddressName}}</span>
                            </div>
                            <div class="content">
                                <span>预估距离</span>
                                <span>{{objDetail.distance | distanceEclipse}}公里</span>
                            </div>
                        </div>

                    </div>
                    <div class="line"></div>
                    <div class="ccwl-hw-detail">
                        <div class="hwt">货物说明</div>
                        <div class="hwc">{{objDetail.intro}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="share-qrcode">
            <div class="qrcode-icon">
                <img src="../image/share/share-qrcode.png" alt="">
            </div>
            <div class="share-link">铁蟹网</div>
        </div>


    </div>
    <script src="../script/flexible.js"></script>
    <script src="../script/vue.min.js"></script>
    <script src="../script/iconfont.js"></script>
    <script src="../script/vant.min.js"></script>
    <script src="../script/common.js"></script>
    <script>
        vm = new Vue({
            el: '.app',
            data: {
                objDetail: {
                    "address": "",
                    "addressName": "",
                    "area": 0,
                    "areaId": 0,
                    "banners": [{
                        "id": 0,
                        "imageUrl": "",
                        "type": 0,
                        "videoId": ""
                    }],
                    "createTime": "",
                    "id": 0,
                    "location": "",
                    "phone": "",
                    "price": "",
                    "publisherType": 0,
                    "status": 0,
                    "storageTypeId": 0,
                    "storageTypeName": "",
                    "tags": [{
                        "id": 0,
                        "name": ""
                    }],
                    "title": "",
                    "unitId": 0,
                    "unitName": "",
                    "updateTime": "",
                    "userId": 0
                },
                objOpt: {
                    shareContent: "",
                    reportContent: "",
                    isCollect: false
                },
                type: 0,
                status: 0,
                module: "STORAGE",


                options: [{
                    name: '微信好友',
                    icon: '../image/circle/wechat.png',
                }, {
                    name: '微信朋友圈',
                    icon: '../image/circle/Wechat_Moments.png',
                }]
            },
            created() {
                // this.initDetail();
                this.objDetail = {
                    "id": "1358596351506583554",
                    "createTime": 1612785586000,
                    "updateTime": 1612767618000,
                    "type": 0,
                    "title": "com",
                    "departureAreaId": "16484",
                    "departureAddress": "人民大道200号",
                    "departureAddressName": "上海市科委",
                    "destinationAreaId": "16561",
                    "destinationAddress": "芷江中路274号",
                    "destinationAddressName": "上海市中医医院",
                    "departureLocation": "121.473701,31.230416",
                    "destinationLocation": "121.471697,31.259192",
                    "phone": "17671312013",
                    "intro": "",
                    "weight": "45.0",
                    "weightUnit": null,
                    "goodsTypeId": "17",
                    "goodsTypeName": "配件",
                    "freight": "56",
                    "freightUnitId": "45",
                    "freightUnitName": "元/吨 ",
                    "status": 1,
                    "userId": "1348523772439789570",
                    "distance": 3205.4163830270086,
                    "publisherType": 1,
                    "tags": [{
                        "id": "86",
                        "name": "高价出租 "
                    }, {
                        "id": "90",
                        "name": "半年 "
                    }],
                    "banners": [{
                        "id": "1358596351628218369",
                        "type": 0,
                        "imageUrl": "http://192.168.1.29:8888/group1/M00/00/05/wKgBHWAgmvmASK2AAAI42y4pOwQ005_150x150.png",
                        "videoId": ""
                    }]
                }

            },
            mounted() {

            },
            filters: {
                handleTime,
                distanceEclipse
            },
            methods: {



            },
        })
    </script>
</body>

</html>
